<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <%- include common %>
    <style>
      .layui-layout-body {
        padding-top: 0;
      }
    </style>
</head>

<body class="layui-layout-body">
  <div class="layui-layout layui-layout-admin">
    <%- include('head',{username:username})  %>
    <div class="layui-body">
      <!-- 内容主体区域 -->
      <table class="layui-table" lay-size="lg">
        <colgroup>

        </colgroup>
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>职位</th>
            <th>家庭住址</th>
            <th>联系方式</th>
            <th>入职时间</th>
            <th>操作</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% data.forEach((item,i)=>{ %>
            <tr data-_id="<%- item._id%>">
              <td style="width:100px;">
                <%- i + 1%>
              </td>
              <td style="width:100px;">
                <%- item.name%>
              </td>
              <td style="width:90px;">
                <%- item.alt%>
              </td>
              <td style="width:100px;">
                <%- item.job%>
              </td>
              <td style="width:280px;">
                <%- item.address%>
              </td>
              <td style="width:100px;">
                <%- item.tel%>
              </td>
              <td style="width:90px;">
                <%- item.time%>
              </td>
              <td><button type="button" class="layui-btn layui-btn-normal"
                  onclick="insert('<%- item._id%>')">修改</button>
              </td>
              <td><button type="button" class="layui-btn layui-btn-danger"
                  onclick="remove('<%- item._id%>')">删除</button></td>
            </tr>


            <% }) %>

        </tbody>
      </table>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      © 国际大酒店 layumen.com
    </div>
  </div>
  <!-- <script src="../src/layui.js"></script> -->
  <script>
    //修改

    function insert(a) {
      $.ajax({
        url: '/users/list/set/insert',
        type: 'GET',
        dataType: 'json',
        data: {
          _id: a
        },
        success: res => {
          var list = res.data
          console.log(list[0])
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
              type: 1,

              area: ['630px', '500px'], //宽高
              content: ` 
              <form class="layui-form" action="/users/list/set/update" method="POST">
                    <div id="add" data-_id='${list[0]._id}' >
                     <div class="layui-form-item">
                         <label class="layui-form-label">姓名:</label>
                         <div class="layui-input-block" style="width: 310px;">
                          <input type="text" name="_id" required lay-verify="required" placeholder="请输入姓名"
                                 autocomplete="off" class="layui-input" value=${list[0]._id} readonly style='background:#eeeeee;display:none'> 
                             <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
                                 autocomplete="off" class="layui-input" value=${list[0].name} readonly style='background:#eeeeee'> 
                         </div>
                     </div>
                     <div class="layui-form-item">
                         <label class="layui-form-label">电话:</label>
                         <div class="layui-input-block" style="width: 310px;">
                             <input type="tel" name="tel" required lay-verify="required" placeholder="请输入电话"
                                 autocomplete="off" class="layui-input " id='phone' value='${list[0].tel}'>
                         </div>
                     </div>
                     <div class="layui-form-item">
                         <label class="layui-form-label">家庭住址</label>
                         <div class="layui-input-inline" style="width: 310px;">
                             <input type="address" name="address" required lay-verify="required" placeholder="请输入家庭住址"
                                 autocomplete="off" class="layui-input" value='${list[0].address}'>
                         </div>
                         <div class="layui-form-mid layui-word-aux">辅助文字</div>
                     </div>
                     <div class="layui-form-item">
                        <label class="layui-form-label">入职时间</label>
                        <div class="layui-input-block" style="width: 310px;">
                        <input type="text" name="time" required lay-verify="required" placeholder="请输入入职时间"
                            autocomplete="off" class="layui-input" value="${list[0].time}" readonly style='background:#eeeeee'>
                        </div>
                     </div>
                     
                     <div class="layui-form-item">
                        <label class="layui-form-label">职位</label>
                        <div class="layui-input-block" style="width: 310px;">
                        <input type="text" name="job" required lay-verify="required" placeholder="请输入职位"
                            autocomplete="off" class="layui-input" value="${list[0].job}" >
                        </div>
                     </div>


                     <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block" style="width: 310px;">
                        <input type="text" name="alt" required lay-verify="required" placeholder="请输入性别"
                            autocomplete="off" class="layui-input" value="${list[0].alt}" readonly style='background:#eeeeee'>
                        </div>
                     </div>
                    


                     <div class="layui-form-item">
                         <div class="layui-input-block">
                             <button type="submit" class="layui-btn">立即提交</button>
                             <button type="button"  class="layui-btn layui-btn-primary" style="width: 100px;margin-left: 100px;">
                                取消
                                <a class=' layui-layer-close layui-layer-close1' href='javascript:;'>...</a>
                                
                            </button>
                         </div>
                     </div>
               </form>
               `
            });

          })
        }
      })
    }


   


    //JavaScript代码区域
    //删除

    function remove(n) {
      console.log(n)
      $.ajax({
        url: '/users/list/set/remove',
        type: 'GET',
        dataType: 'json',
        data: {
          _id: n
        },
        success: res => {
          if (res.code == 200) {
            layui.use('layer', function () {
              var layer = layui.layer;
              layer.msg('删除成功')
            });
            setTimeout(() => {
              location.reload()
            }, 1000);

          }
        }
      })
    }
    layui.use('element', function () {
      var element = layui.element;

    });
  </script>
</body>

</html>